<template>
    <div class="page-main">
        <h1 class="page-title">播放列表</h1>

        <playlist-main
            :playlist="playlist.playlist"
            :selected="selected"
            @toggle-play="togglePlay"
            @add="addMidiItems"
            @delete="deleteMidiItems"
            @move-up="(index) => playlist.moveUp(index)"
            @move-down="(index) => playlist.moveDown(index)"
        />
    </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { MidiItem } from "@/lib/midi";
import usePlaylistStore from "@/store/playlist";
import PlaylistMain from "@/components/playlist/PlaylistMain.vue";

const playlist = usePlaylistStore();

const selected = reactive(new Set<number>());

/**
 * 切换播放状态
 * @param index 索引
 */
async function togglePlay(index: number) {
    if (playlist.getFocus() !== index) {
        await playlist.setFocus(index);
    }
    await playlist.togglePause();
}

/**
 * 添加 MidiItem
 * @param items MidiItem
 */
async function addMidiItems(...items: MidiItem[]) {
    // 插入到 playlist
    await playlist.insert(...items);
}

/**
 * 删除选中的 MidiItem
 * @param indexes 索引
 */
async function deleteMidiItems(...indexes: number[]) {
    if (indexes.length === playlist.length) {
        await playlist.removeAll();
    } else {
        await playlist.remove(...indexes);
    }
}
</script>
